Telegram Group & Telegram Channel
​​Min(), max() и clamp().
Динамика важна, как часто вам приходилось делать динамический адаптив? Иногда нам сложно манипулировать процентами или другими динамическими величинами в css. Чтобы задать некие рамки для динамических значений можно использовать функции min, max и clamp. У них уже достаточно неплохая поддержка, поэтому если вам не надо поддерживать старые браузеры, то можете смело пользоваться

Синтаксис очень простой: в функцию min через запятую передаём значения, из которых функция вернёт наименьшее, max соответственно — большее. Clamp тоже довольно полезная функция, которая создаёт уже диапазон значений

Приведу простой пример: у нас есть главный экран и фиксированная шапка, экран сделан фулскрином, но контент находиться не по центру экрана, а сдвинут с помощью padding на 30vh вниз. Если просто задать верхний отступ 30vh, то все будет отлично работать, но если высота устройства будет слишком маленькая, то контент будет налезать на шапку, удобным решением будет написать padding-top: max(30vh,100px) тогда если 30vh будет меньше 100px, то все будет отображаться корректно

Прикреплю статью с более подробным описанием работы этих css-функций, в частности и про работу clamp



tg-me.com/ProgrammerwayIT/531
Create:
Last Update:

​​Min(), max() и clamp().
Динамика важна, как часто вам приходилось делать динамический адаптив? Иногда нам сложно манипулировать процентами или другими динамическими величинами в css. Чтобы задать некие рамки для динамических значений можно использовать функции min, max и clamp. У них уже достаточно неплохая поддержка, поэтому если вам не надо поддерживать старые браузеры, то можете смело пользоваться

Синтаксис очень простой: в функцию min через запятую передаём значения, из которых функция вернёт наименьшее, max соответственно — большее. Clamp тоже довольно полезная функция, которая создаёт уже диапазон значений

Приведу простой пример: у нас есть главный экран и фиксированная шапка, экран сделан фулскрином, но контент находиться не по центру экрана, а сдвинут с помощью padding на 30vh вниз. Если просто задать верхний отступ 30vh, то все будет отлично работать, но если высота устройства будет слишком маленькая, то контент будет налезать на шапку, удобным решением будет написать padding-top: max(30vh,100px) тогда если 30vh будет меньше 100px, то все будет отображаться корректно

Прикреплю статью с более подробным описанием работы этих css-функций, в частности и про работу clamp

BY Programmer Way | IT и фриланс




Share with your friend now:
tg-me.com/ProgrammerwayIT/531

View MORE
Open in Telegram


Programmer Way | IT и фриланс Telegram | DID YOU KNOW?

Date: |

What is Telegram Possible Future Strategies?

Cryptoassets enthusiasts use this application for their trade activities, and they may make donations for this cause.If somehow Telegram do run out of money to sustain themselves they will probably introduce some features that will not hinder the rudimentary principle of Telegram but provide users with enhanced and enriched experience. This could be similar to features where characters can be customized in a game which directly do not affect the in-game strategies but add to the experience.

What is Telegram?

Telegram’s stand out feature is its encryption scheme that keeps messages and media secure in transit. The scheme is known as MTProto and is based on 256-bit AES encryption, RSA encryption, and Diffie-Hellman key exchange. The result of this complicated and technical-sounding jargon? A messaging service that claims to keep your data safe.Why do we say claims? When dealing with security, you always want to leave room for scrutiny, and a few cryptography experts have criticized the system. Overall, any level of encryption is better than none, but a level of discretion should always be observed with any online connected system, even Telegram.

Programmer Way | IT и фриланс from de


Telegram Programmer Way | IT и фриланс
FROM USA